<!--
 * @Author: 袁文帅
 * @Date: 2021-02-21 10:14:19
 * @LastEditTime: 2021-02-21 19:04:49
 * @LastEditors: last update your name
 * @人生亦有命，安能行叹复坐愁
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='box'></div>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">

        // 任务集合 
        let initParams=[]
        // 全局下标
        let initIndex = 0

        // 监听方法
        function myUseeffect(cbk,isArray){
            let oldParams = initParams[initIndex];
            let isLike=oldParams ? !oldParams.every((item,i)=>item===isArray[i]) : true
            if(!isArray|| isLike){
                cbk()
            }
            initParams[initIndex] = isArray
            initIndex++
        }

        function myUsestate(params) {
            // 局部下标
            let currentIndex = initIndex
            // 收集任务
            initParams[currentIndex] = initParams[currentIndex] ? initParams[currentIndex] : params
            // usestate的第二个参数
            function changeParams(newParams){
                initParams[currentIndex] = newParams
                // 会先运行一遍 这个时候下标已经存在了 所以避免多次调用下标叠加
                initIndex = 0
                render()
            }
            initIndex++
            return [initParams[currentIndex],changeParams]
        }

        function Home() {
            let [count,changeCount] = myUsestate(1)
            let [countTwo,changeCountTwo] = myUsestate(2)
            myUseeffect(()=>{
                console.log(initParams)
            })
            return <div>
                home组件定义自己的state{count}
                <button onClick={()=>{
                    changeCount(count+1)
                }}>点击修改</button>
                home组件定义自己的state{countTwo}
                <button onClick={()=>{
                    changeCountTwo(countTwo+1)
                }}>点击修改</button>
                </div>
        }
        
        // 封装函数用来更新视图
        function render(){
            ReactDOM.render(
                <Home />,
                document.getElementById('box')
            )
        }
        render()
    </script>

</body>
</html>